<template>
    <div class="app cloak" :class="isready==true?'clear_cloak':''">
        <div class="list">
            <a v-for="(item,index) in list" :key="index" class="item" :href="'/pages/writing/index/main?code='+item.code" open-type="redirect">
                <div class="info">
                    <img class='photo' :src="resurl+item.photo+'?x-oss-process=image/resize,m_fill,w_360,h_540'"
                         mode="aspectFill"/>
                    <div class="r">
                        <div class="text title">作品名称:{{item.title}}</div>
                        <div class="text code">作品编号:{{item.code}}</div>
                        <div class="text name">选手姓名:{{item.name}}</div>
                        <div class="text teacher">指导教师:{{item.teacher}}</div>
                        <div class="text teacher">报名时间:{{item.datetime}}</div>
                    </div>
                    <div class="pay_btn" v-if="item.status==0" @click="pay(item.orderno)">付款</div>
                </div>
            </a>
        </div>
    </div>
</template>

<script>
    var that = null
    export default {
        data() {
            return this.datainit({
                search: "",
                list: []
            })
        },
        created() {
            that = this
            this.isready = true

        },
        mounted() {
            that.search = that.get("search");
            that.check()
        },
        onUnload(){
            that.list=[]
        },
        methods: {
            init() {
                that.$post("api/writing/lists", {search: that.search}, function (list) {
                    that.list = list
                })
            },
            settab(_tab){
              that.status=_tab;
              that.init()
            },
            pay(orderno){
                that.$post("api/writing/pay",{orderno:orderno},function (pay_config) {
                    wx.requestPayment({
                        timeStamp: pay_config.timestamp,
                        nonceStr: pay_config.nonceStr,
                        package: pay_config.package,
                        signType: 'MD5',
                        paySign: pay_config.paySign,
                        success(res) {
                           that.init()
                        },
                        fail(res) {

                        }
                    })
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .tablist {
        position: relative;
        display: flex;
        width: 100%;
        height: 40px;
        background: #FFF;

        .tab {
            flex: 1;
            text-align: center;
            line-height: 40px;
        }

        .activate {
            color: #F66;
        }
    }

    .list {
        position: relative;

        .item {
            position: relative;
            width: 100%;
            background: #FFF;
            margin-top: 5px;
            margin-bottom: 5px;

            .info {
                box-sizing: border-box;
                border: 10px solid #FFF;
                position: relative;
                width: 100%;
                height: 155px;

                .photo {
                    display: block;
                    width: 90px;
                    height: 135px;
                    position: absolute;
                    left: 0;
                    top: 0;
                }

                .r {
                    position: absolute;
                    left: 100px;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    .text{
                        position: relative;
                        line-height: 25px;
                        height: 25px;
                        overflow: hidden;
                    }
                    .title{
                        position: relative;
                        font-weight: bold;
                    }
                }
                .pay_btn{
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    z-index: 9;
                    color: #F66;
                }
            }

        }
    }
</style>

